<template>
    <div class="review_plan_container">
        <div class="review_plan">
            <div class="filters">
                <label>选择学生：</label>
                <select v-model="selectedStudentId">
                    <option v-for="student in students" :key="student.student_id" :value="student.student_id">{{
                        student.name }}
                    </option>
                </select>
                <button @click="loadPlans">加载计划</button>
            </div>
            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>内容标题</th>
                            <th>初始学习日期</th>
                            <th>下次复习日期</th>
                            <th>间隔日期</th>
                            <th>复习阶段</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="plan in plans" :key="plan.id">
                            <td>{{ plan.plan_id }}</td>
                            <td>{{ plan.title }}</td>
                            <td>{{ plan.initial_date }}</td>
                            <td>{{ plan.next_review_date }}</td>
                            <td>{{ plan.interval_days }}</td>
                            <td>{{ plan.ebbinghaus_stage }}</td>
                            <td class="action-buttons">
                                <button @click="deletePlan(plan.plan_id)">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { ApiService } from '@/api/apiService';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();

// 学生数据
const students = ref([]);
// 初始化数据
async function fetchItems() {
    try {
        const userId = userStore.getUser?.user_id;
        if (!userId) throw new Error('User ID not found');

        const response = await ApiService.getStudentsList(userId);
        console.log('获取学生列表成功:', response.data.code);
        if (response.data.code === 200) {
            students.value = response.data.data;
            // 设置默认选中第一个学生
            if (students.value.length > 0) {
                selectedStudentId.value = students.value[0].student_id;
            }
            loadPlans();
        } else {
            console.error('获取学生列表失败:', response.data);
        }
    } catch (error) {
        console.error('error:', error);
    }
}

onMounted(() => {
    fetchItems();
});

fetchItems();
// 选中的学生ID
const selectedStudentId = ref(1);

//复习计划数据
const plans = ref([]);

// 加载复习计划
const loadPlans = async () => {
    console.log('加载复习计划');
    const response = await ApiService.get_review_plan(selectedStudentId.value);
    console.log('selectedStudentId:', selectedStudentId.value);
    if (response.data.code === 200) {
        console.log('获取复习计划成功:', response.data);
        plans.value = response.data.data;
    } else {
        console.error('获取复习计划失败:', response.data);
    }
};

// 删除计划
const deletePlan = async (id) => {
    plans.value = plans.value.filter(plan => plan.id !== id);

    console.log('删除计划:', id);
    const response = await ApiService.delete_review_plan(id);
    if (response.data.code === 200) {
        console.log('删除计划成功:', response.data);
        loadPlans();
    } else {
        console.error('删除计划失败:', response.data);
    }
};
</script>

<style scoped>
    @import url("@/assets/css/review_plan.css");
</style>